<template>
  <div class="main">
    <h3 :tongming>模板语法-属性</h3>
    <div>
      <button type="button" :disabled="isDisabled" v-on:click="changeId">改变isTrue的值</button>
      <button type="button" :disabled="isDisabled" @click="changeBindId">改变bindId的值</button>
      <div id="commonId">正常绑定id属性</div>
      <div v-bind:id="bindId">v-bind:id="dynamicId"</div>
      <div v-bind:id="isTrue ? bindId : 'commonId'">v-bind:id="dynamicId"</div>

      <hr />
      <button type="button" @click="isDisabled = !isDisabled">
        该变上边两个button的disabled属性
      </button>

      <hr />

      <h6>绑定多个属性</h6>
      <div v-bind="objectOfAttrs">我是div 我绑定了多个属性</div>

      <hr />
      <h6>可以在绑定的表达式中使用一个组件暴露的方法：</h6>
      <div :id="returnJoinStr()" :class="returnJoinStr()">
        {{ returnJoinStr() }}
      </div>

      <hr />
      <h6>暴露的常用内置全局对象</h6>
      <div>
        const GLOBALS_ALLOWED =
        'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
        'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
        'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error,Symbol'
      </div>

      <hr />
      <h3>指令 Directives</h3>
      <div>
        <p v-if="isTrue">我是if指令控制的</p>
      </div>

      <hr />

      <h3>参数 Arguments</h3>
      <p>
        某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind
        指令来响应式地更新一个 HTML attribute:
        <a href="http://www.baidu.com"> 跳转百度</a>
        <a :href="`http://www.baidu.com/s?wd=${keywords}`">在百度搜索国足</a>
        <img :src="`/src/assets/images/${imgStr}.jpg`" @click="imgStr = 8" alt="" width="500" />
      </p>

      <hr />

      <h4>动态参数</h4>
      <p>同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：</p>
      <div>
        <a v-bind:[attributeName]="`http://www.baidu.com`"> 啊链接 </a>
        <a :[attributeDataName]="'dataa'" v-bind:[attributeName]="`http://www.baidu.com`">
          啊链接
        </a>

        <a @[eventName]="() => console.log(' a链接动态绑定事件')"> a链接动态绑定事件 </a>

        <a :[`${attributeDataName}foo`]="'dataa'" v-bind:[attributeName]="`http://www.baidu.com`">
          啊链接(`${attributeDataName}foo`)
        </a>
      </div>
      <hr />

      <div
        class="outer"
        @click.once="
          () => {
            console.log('outer被点了')
          }
        "
      >
        <div
          class="inner"
          @click.stop="
            (even) => {
              console.log('inner 被点了')
            }
          "
        >
          <div
            class="child"
            @click="
              (even) => {
                console.log(even)
                even.stopPropagation()

                console.log('child 被点了')
              }
            "
          ></div>
        </div>
      </div>

      <form action="http://www.baidu.com/s">
        <input type="text" name="wd" id="" />
        <button type="submit" @click.prevent="() => console.log('跳转到百度')">表单提交</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study2StudDemo2'
}
</script>

<script setup lang="ts">
import { ref } from 'vue'

const bindId = ref('stuId')

let attributeName = 'href'
let attributeDataName = 'data-a'
let eventName = 'click'

const isDisabled = ref(false)

const isTrue = ref(false)

let tongming = 'arrtName'

// 用于绑定多个属性
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

let keywords = '国足'

const imgStr = ref(5)

function changeId() {
  isTrue.value = true
}

function changeBindId() {
  bindId.value = 'commonId'
}

function returnJoinStr() {
  let arr3 = ['Stu', 'ui']
  return arr3.join('_')
}
</script>



<style lang="scss" scoped>
.main {
  margin-bottom: 300px;
}
h3 {
  text-align: center;
}

#commonId {
  color: red;
}
#stuId {
  color: blueviolet;
}

.outer {
  height: 500px;
  width: 500px;
  background-color: rgb(134, 57, 151);

  .inner {
    height: 300px;
    width: 300px;
    background-color: rgb(57, 104, 151);
    .child {
      height: 100px;
      width: 100px;
      background-color: rgb(143, 151, 57);
    }
  }
}
</style>
